<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://misc.360buyimg.com/mtd/pc/index_2019/1.0.0/static/css/first-screen.chunk.css">
    <link rel="stylesheet" href="https://misc.360buyimg.com/mtd/pc/index_2019/1.0.0/static/css/index.chunk.css">
    <link rel="stylesheet" href="https://misc.360buyimg.com/mtd/pc/index_2019/1.0.0/static/css/feed.chunk.css">
    <style>
        body {
            background-color: #f4f4f4;
        }

        .lazyimg_img {
            opacity: 1;
        }
    </style>
</head>

<body>
    <div class="grid_c1 more2_inner" clstag="a">
        <div>
            <ul id="feedContent0" class="more2_list clearfix" role="tabpanel" aria-labelledby="feedTab0">
                <!-- <li class="more2_item more2_item_good hover-on">
                    <span class="more2_item_gdot"></span>
                    <a class="more2_lk" href="//item.jd.com/41274326748.html" target="_blank"
                        title="探路者（TOREAD）儿童童装 男女中大童秋冬款学生保暖二合一套绒冲锋衣外套夹克QAWJ95132 樱花粉QAWJ95132 130"
                        aria-label="探路者（TOREAD）儿童童装 男女中大童秋冬款学生保暖二合一套绒冲锋衣外套夹克QAWJ95132 樱花粉QAWJ95132 130"
                        clstag="h|keycount|feed|01#pd_001-a">
                        <div class="lazyimg lazyimg_loaded more2_img"><img
                                src="//img13.360buyimg.com/jdcms/s300x300_jfs/t1/205807/24/10893/193527/616597b0E5ffa878b/9c55ec54e6c8877e.jpg.webp"
                                class="lazyimg_img"
                                alt="探路者（TOREAD）儿童童装 男女中大童秋冬款学生保暖二合一套绒冲锋衣外套夹克QAWJ95132 樱花粉QAWJ95132 130"></div>
                        <div class="more2_info">
                            <p class="more2_info_name">探路者（TOREAD）儿童童装 男女中大童秋冬款学生保暖二合一套绒冲锋衣外套夹克QAWJ95132 樱花粉QAWJ95132
                                130</p>
                            <div class="more2_info_price more2_info_price_plus more2_info_price_newcomer">
                                <div class="mod_price"><i>¥</i><span class="more2_info_price_txt">489.<span
                                            class="more2_info_price_txt-decimal">00</span></span></div>
                                <div class="more2_price_plus">
                                    <div class="more2_discount">券</div>
                                </div>
                            </div>
                        </div>
                        <div class="more2_item_hover">
                            <div class="more2_item_delete" clstag="h|keycount||feed|01#pd_001-b" title="不喜欢"></div>
                            <div class="more2_item_hd" title="">
                                <div class="more2_item_btn more2_btn_find enable" clstag="h|keycount||feed|01#pd_001-c">
                                    <i class="more2_btn_icon"></i><span>找相似</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </li> -->
            </ul>
            <!-- <div class="more2_loading">
                <em style="background-color: rgb(88, 88, 87);"></em>
                <em style="background-color: rgb(150, 151, 150);"></em>
                <em style="background-color: rgb(209, 210, 208);"></em>
            </div> -->
        </div>
    </div>
</body>
<script>
    // 商品的动态生成   =>  模板字符串 => 可以根据既定的模板批量生成

    var more2_list = document.getElementsByClassName("more2_list")[0];

    var req = new XMLHttpRequest();  // 0

    req.open("get", "../data/2189.json", true);  // 1

    req.send();  // 1

    req.onreadystatechange = function () {
        // console.log("readyState", req.readyState);  // 2 3 4
        if (req.readyState == 4 && req.status == 200) { // 有结果 且是成功的
            console.log(req.responseText);

            var data = JSON.parse(req.responseText);
            // console.log(data);

            var { goodslist } = data;
            // console.log(goodslist);

            // goodslist.forEach(function (item) {
            //     console.log(item);
            //     var { goodsname, goodsprice, goodsimg, id } = item;
            // })

            var html = "";
            goodslist.forEach(function ({ goodsname, goodsprice, goodsimg, id }) {
                html += `<li class="more2_item more2_item_good hover-on">
                                 <div class="o2_impr"></div>
                                 <a class="more2_lk" href="javascript:;"
                                     target="_blank" title="${goodsname}" aria-label="${goodsname}"
                                     clstag="h|keycount|feed|01#pd_049-a">
                                     <div class="mod_lazyload_placeholder" style="height: 220px;">
                                         <img
                                             src="${goodsimg}"
                                             class="lazyimg_img"
                                             alt="${goodsname}">
                                     </div>
                                     <div class="more2_info">
                                         <p class="more2_info_name"><i class="more2_info_self">自营</i>${goodsname}</p>
                                         <div class="more2_info_price more2_info_price_plus more2_info_price_newcomer">
                                             <div class="mod_price"><i>¥</i><span class="more2_info_price_txt">${String(goodsprice).split(".")[0]}.<span
                                                         class="more2_info_price_txt-decimal">${String(goodsprice).split(".")[1]}</span></span></div>
                                         </div>
                                     </div>
                                     <div class="more2_item_hover">
                                         <div class="more2_item_delete" clstag="h|keycount||feed|01#pd_049-b" title="不喜欢"></div>
                                         <div class="more2_item_hd" title="">
                                             <div class="more2_item_btn more2_btn_find enable" clstag="h|keycount||feed|01#pd_049-c">
                                                 <i class="more2_btn_icon"></i><span>找相似</span></div>
                                         </div>
                                     </div>
                                 </a>
                             </li>`
            })

            more2_list.innerHTML = html; //生成

        }
    }






</script>

</html>